<template>
  <div style="margin-top: 10px">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span class="search-card-title">Condition Search</span>
        </div>
      </template>
      <el-form
        :inline="true"
        :model="searchInfo"
        class="demo-form-inline"
        ref="searchInfo"
      >
        <el-row>
          <el-form-item label="Phone:" prop="phone">
            <el-input
              style="width: 240px"
              v-model="searchInfo.phone"
              placeholder="please input phone number"
            ></el-input>
          </el-form-item>
          &nbsp;&nbsp;&nbsp;&nbsp;
          <el-form-item label="Role:" prop="role">
            <el-select
              style="width: 220px"
              v-model="searchInfo.role"
              placeholder="please select role"
            >
              <el-option label="User" value="user"></el-option>
              <el-option label="Auditor" value="auditor"></el-option>
              <el-option
                label="Administrator"
                value="administrator"
              ></el-option>
            </el-select>
          </el-form-item>
          &nbsp;&nbsp;&nbsp;&nbsp;
          <el-form-item label="Registration Time:" prop="createTime">
            <el-date-picker
              v-model="searchInfo.createTime"
              type="daterange"
              range-separator="to"
              start-placeholder="Start time"
              end-placeholder="End time"
            >
            </el-date-picker>
          </el-form-item>
          &nbsp;&nbsp;&nbsp;&nbsp;
          <el-form-item label="Status:" prop="status">
            <el-select
              style="width: 220px"
              v-model="searchInfo.status"
              placeholder="please select status"
            >
              <el-option label="Activation" value="activation"></el-option>
              <el-option label="Frozen" value="frozen"></el-option>
            </el-select>
          </el-form-item>
        </el-row>
        <el-row>
          <el-col
            :span="6"
            :offset="18"
            style="text-align: end; padding-top: 10px; padding-right: 10px"
          >
            <el-button
              type="primary"
              size="mini"
              @click="searchForm(searchInfo)"
              >SEARCH</el-button
            >
            <el-button type="info" size="mini" @click="resetForm('searchInfo')"
              >RESET</el-button
            >
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <br />
    <el-row>
      <el-col :span="24">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span class="search-card-title">User Information</span>
              <el-col
                :span="6"
                :offset="16"
                style="text-align: end; padding-right: 10px"
              >
                <el-button
                  size="medium"
                  type="danger"
                  icon="el-icon-delete"
                  @click="batchDelete()"
                  >Batch Delete</el-button
                >
                <el-button icon="el-icon-download">Export to Excel</el-button>
              </el-col>
            </div>
          </template>
          <el-table
            :data="tableData1"
            style="width: 100%"
            row-key="id"
            border
            @selection-change="handleSelectionChange"
            ><el-table-column type="selection" width="45"> </el-table-column>
            <el-table-column prop="phone" label="Phone" width="180">
            </el-table-column>
            <el-table-column prop="nickname" label="Nickname" width="150">
            </el-table-column>
            <el-table-column prop="email" label="Email" width="240">
            </el-table-column>
            <el-table-column label="Role" width="120">
              <template slot-scope="scope">
                <div>
                  <el-tag
                    type="primary"
                    size="medium"
                    v-if="scope.row.role == 'User'"
                    >{{ scope.row.role }}</el-tag
                  >
                  <el-tag
                    type="success"
                    size="medium"
                    v-if="scope.row.role == 'administrator'"
                    >{{ scope.row.role }}</el-tag
                  >
                  <el-tag
                    type="warning"
                    size="medium"
                    v-if="scope.row.role == 'auditor'"
                    >{{ scope.row.role }}</el-tag
                  >
                </div>
              </template>
            </el-table-column>

            <el-table-column
              prop="createTime"
              label="Create Time"
              width="180"
              sortable
            >
            </el-table-column>
            <el-table-column prop="status" label="Status" width="180">
              <template slot-scope="scope">
                <div>
                  <el-tag type="primary" v-if="scope.row.status == 'frozen'">{{
                    scope.row.status
                  }}</el-tag>
                  <el-tag
                    type="success"
                    v-if="scope.row.status == 'activation'"
                    >{{ scope.row.status }}</el-tag
                  >
                </div>
              </template>
            </el-table-column>

            <el-table-column
              prop="totalQuestionnaires"
              label="Total Questionnaires"
              width="170"
            >
            </el-table-column>

            <el-table-column label="Operations">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="success"
                  icon="el-icon-folder-checked"
                  @click="handleDetail(scope.$index, scope.row)"
                  >Detail</el-button
                >
                <el-button
                  size="mini"
                  type="danger"
                  icon="el-icon-delete"
                  @click="handleDelete(scope.$index, scope.row)"
                  >Delete</el-button
                >
                <el-button
                  v-if="scope.row.status == 'activation'"
                  type="primary"
                  size="mini"
                  icon="el-icon-lock"
                  @click="handleLock(scope.row.id, 'frozen')"
                  >frozen</el-button
                >
                <el-button
                  v-if="scope.row.status == 'frozen'"
                  type="success"
                  size="mini"
                  icon="el-icon-unlock"
                  @click="handleLock(scope.row.id, 'activation')"
                  >activation</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <br />
          <el-pagination
            :currentPage="pagination.currentPage"
            :page-size="pagination.pageSize"
            :page-sizes="[10, 50, 100, 200]"
            layout="total, sizes, prev, pager, next"
            :total="pagination.totalPages"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchInfo: {
        phone: "",
        role: "",
        createTime: [],
        status: "",
      },
      tableData1: [
        {
          id: 1,
          phone: "13436000485",
          nickname: "王小虎",
          role: "User",
          authority: "乌七八糟",
          createTime: "2021-05-03 15:32:23",
          status: "activation",
          totalQuestionnaires: "5",
          email: "154fsfsd1351351@163.com",
        },
        {
          id: 2,
          phone: "13436000485",
          nickname: "王虎",
          role: "auditor",
          authority: "乌八糟",
          createTime: "2011-05-07 15:35:23",
          status: "frozen",
          totalQuestionnaires: "2",
          email: "154135fsdfsd1351@163.com",
        },
        {
          id: 3,
          phone: "13436000485",
          nickname: "王2虎",
          role: "administrator",
          authority: "乌糟",
          createTime: "2020-03-04 05:12:23",
          status: "activation",
          totalQuestionnaires: "4",
          email: "154132hfg351@163.com",
        },
        {
          id: 4,
          phone: "13436000485",
          nickname: "王2虎",
          role: "administrator",
          authority: "乌糟",
          createTime: "2020-03-04 05:12:23",
          status: "activation",
          totalQuestionnaires: "4",
          email: "154132hfg351@163.com",
        },
        {
          id: 5,
          phone: "13436000485",
          nickname: "王2虎",
          role: "administrator",
          authority: "乌糟",
          createTime: "2020-03-04 05:12:23",
          status: "activation",
          totalQuestionnaires: "4",
          email: "154132hfg351@163.com",
        },
        {
          id: 6,
          phone: "13436000485",
          nickname: "王2虎",
          role: "administrator",
          authority: "乌糟",
          createTime: "2020-03-04 05:12:23",
          status: "activation",
          totalQuestionnaires: "4",
          email: "154132hfg351@163.com",
        },
        {
          id: 7,
          phone: "13436000485",
          nickname: "王2虎",
          role: "administrator",
          authority: "乌糟",
          createTime: "2020-03-04 05:12:23",
          status: "activation",
          totalQuestionnaires: "4",
          email: "154132hfg351@163.com",
        },
        {
          id: 8,
          phone: "13436000485",
          nickname: "王2虎",
          role: "administrator",
          authority: "乌糟",
          createTime: "2020-03-04 05:12:23",
          status: "activation",
          totalQuestionnaires: "4",
          email: "154132hfg351@163.com",
        },
        {
          id: 9,
          phone: "13436000485",
          nickname: "王2虎",
          role: "administrator",
          authority: "乌糟",
          createTime: "2020-03-04 05:12:23",
          status: "activation",
          totalQuestionnaires: "4",
          email: "154132hfg351@163.com",
        },
      ],
      pagination: {
        currentPage: 1,
        pageSize: 10,
        totalPages: 10,
      },
      multipleSelection: [],
    };
  },
  mounted() {},
  methods: {
    //查看问卷,问卷的回显
    handleDetail(index, row) {
      this.$router.push("/systemManagement/userDetail");
      sessionStorage.setItem("phone", row.phone);
      //console.log(index, row);
    },
    //删除问卷
    handleDelete(index, row) {
      console.log(index, row);
      this.$confirm("此操作将永久删除该用户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    batchDelete() {
      console.log(this.multipleSelection);
      this.$confirm("此操作将永久删除这些数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //多选选中
    handleSelectionChange(val) {
      console.log(val);
      this.multipleSelection = val;
    },
    //清空搜索条件
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    searchForm(formName) {
      //搜索表单信息
      console.log(formName);
    },

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    //锁定问卷
    handleLock(id, status) {
      this.tableData1[id - 1].status = status;
    },
  },
};
</script>

<style scoped lang="scss">
.box-card {
  width: 90%;
  background: rgba(148, 185, 228, 0.062);
  border-radius: 8px;
  text-align: center;
  margin: auto;
}
.card-header {
  color: #080808;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.search-card-title {
  font-size: 16px;
  font-weight: 600;
}
.el-card /deep/.el-card__header {
  background-color: #64bbe742;
  padding: 6px;
}
</style>